 <%
  use itertools::Itertools;

  let input_classes = input_classes.into_iter().join(" ");
%>

 <div data-controller="inputs-range-group-v-2">
   <input
    class="form-range z-1 overlay-offset mb-3" 
    type="range"
    name="<%= name %>"
    min="<%= min %>"
    max="<%= max %>"
    step="<%= step %>"
    value="<%= value %>"
    data-action="input->inputs-range-group-v-2#onRangeInput <%= actions %>"
    data-inputs-range-group-v-2-target="range"
  >
  <div class="row gy-3">
    <div class="col-md-6 col-12">
      <div class="d-flex align-items-center">
        <input
          type="text"
          class="<%= input_classes %>"
          data-action="input->inputs-range-group-v-2#onInputInput focusin->inputs-range-group-v-2#onInputFocusIn blur->inputs-range-group-v-2#onInputBlur <%= actions %>"
          data-inputs-range-group-v-2-target="input"
          value="<%= value %>"
        >
        <% if !input_unit.is_empty() { %>
        <span
          class="inputs-range-group-v-2-unit fw-semibold"
          data-inputs-range-group-v-2-target="unit"
          data-action="click->inputs-range-group-v-2#onUnitClick"
        >
          <%= input_unit %>
        </span>
        <% } %>
      </div>
    </div>

    <% if !cost_per_unit.is_empty() { %>
    <div class="col-md-6 col-12">
      <div class="d-flex justify-content-between bg-black align-items-center h-100 rounded-2 px-3" style="min-height: 60px;">
        <span>
          Per <%= unit %>
        </span>
        <span>
          <span class="me-2">$</span>
          <span><%= cost_per_unit %>/<%= cost_frequency %></span>
        </span>
      </div>
    </div>
    <% } %>
  </div>
</div>
